<?php
	session_start();
	$tanggal = new \DateTime;
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Pratt - Free Bootstrap 3 Theme">
    <meta name="author" content="Alvarez.is - BlackTie.co">
    <link rel="shortcut icon" href="assets/ico/favicon.png">

    <title>QAS Al Qur'an Bahasa Indonesia</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/main.css" rel="stylesheet">
    
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
    
    <link href="assets/syntaxHighlighter/shCore.css" rel="stylesheet">
    <link href="assets/syntaxHighlighter/shThemeDefault.css" rel="stylesheet">
    
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/smoothscroll.js"></script>
    
    <script type="text/javascript" src="assets/syntaxHighlighter/shAutoloader.js"></script>
	<script type="text/javascript" src="assets/syntaxHighlighter/shCore.js"></script>
	<script type="text/javascript" src="assets/syntaxHighlighter/shBrushPlain.js"></script>
	<script type="text/javascript" src="assets/syntaxHighlighter/shBrushPhp.js"></script>
	<script type="text/javascript" src="assets/syntaxHighlighter/shBrushCpp.js"></script>
	
	<style type="text/css">
	#navigation {
		background: none repeat scroll 0 0 #222222;
	}
	
	#navigation .container .navbar-collapse .nav .menu-utama,
	#navigation .container .navbar-header .navbar-brand {
		color: #fff;
	}
	
	#navigation .container .navbar-collapse .nav .active .menu-utama {
		color: #222222;
	}
	
	.page-header {
		border-bottom: 2px solid #ddd;
	}
	
	@font-face {
		font-family: myFirstFont;
		/*src: url(fonts/UthmanicHafs1 Ver09.otf);*/
		/*src: url(fonts/PDMS_Saleem_QuranFont-signed.ttf);*/
		src: url(fonts/Scheherazade-R.ttf);
	}
	
	table th.head-table {
		text-align: center;
		text-valign: center;
	}
	
	table td.arabic {
		font-family: myFirstFont;
		text-align: right;
		font-size: 26px;
		letter-spacing: 1px;
		word-spacing: 3px;
		line-height:50px;
	}
	table td.indonesia {
		text-align: left;
		line-height:50px;
		text-valign: center;
	}
	
	table td .arabic {
		font-family: myFirstFont;
		text-align: right;
		font-size: 26px;
		letter-spacing: 1px;
		word-spacing: 3px;
		line-height:50px;
	}
	table td .indonesia {
		text-align: left;
		line-height:50px;
		text-valign: center;
	}
	
	a {
		color: #34495e;
	}
	
	#c .container a {
		color: #fff;
		font-weight: bold;
	}
.pagination {
    margin: 20px 0;
    text-align: center;
    width:100%;
}
.pagination ul {
    border-radius: 0;
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);*/
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
}
.pagination ul > li {
    display: inline;
}
.pagination ul > li > a, .pagination ul > li > span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #dddddd;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 20px;
    padding: 4px 12px;
    text-decoration: none;
}
.pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span {
    background-color: #34495e;
    color: #fff;
}
.pagination ul > .active > a, .pagination ul > .active > span {
	background-color: #222;
    color: #fff;
    cursor: default;
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover {
    background-color: transparent;
    color: #999999;
    cursor: default;
}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
    border-bottom-left-radius: 0;
    border-left-width: 1px;
    border-top-left-radius: 0;
}
.pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.pagination-centered {
    text-align: center;
}
.pagination-right {
    text-align: right;
}
.pagination-large ul > li > a, .pagination-large ul > li > span {
    font-size: 17.5px;
    padding: 11px 19px;
}
.pagination-large ul > li:first-child > a, .pagination-large ul > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination-large ul > li:last-child > a, .pagination-large ul > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a, .pagination-small ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a, .pagination-small ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.pagination-small ul > li > a, .pagination-small ul > li > span {
    font-size: 11.9px;
    padding: 2px 10px;
}
.pagination-mini ul > li > a, .pagination-mini ul > li > span {
    font-size: 10.5px;
    padding: 0 6px;
}
/*
.pagination {
    text-align: center;
}
.pagination {
    margin: 20px 0;
}
.pagination ul {
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
}
.pagination ul > li {
    display: inline;
}
li {
    line-height: 20px;
}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
    border-bottom-left-radius: 0;
    border-left-width: 1px;
    border-top-left-radius: 0;
}
.pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > span, .pagination ul > .disabled > span:hover {
    background-color: transparent;
    color: #555555;
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover {
    background-color: transparent;
    color: #999999;
    cursor: default;
}
.pagination ul > li > a, .pagination ul > li > span {
    color: #555555;
    padding: 2px 14px 0;
}
.pagination ul > li > a, .pagination ul > li > span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #dddddd;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 20px;
    padding: 4px 12px;
    text-decoration: none;
}
*/
	</style>
    
	<script type="text/javascript">
		 SyntaxHighlighter.all()
	</script>
  </head>

  <body data-spy="scroll" data-offset="0" data-target="#navigation">

    <!-- Fixed navbar -->
	    <div id="navigation" class="navbar navbar-default navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="?menu=home"><b>QAS Al Qur'an</b></a>
	        </div>
	        <div class="navbar-collapse collapse">
	          <ul class="nav navbar-nav">
				<?php
					$menuActive  = isset($_GET['menu']) ? $_GET['menu'] : 'home';
					$homeActive  = '';
					$quranActive = '';
					$qasActive   = '';
					$aboutActive = '';
					switch ($menuActive) {
						case 'home':
							$homeActive = 'class="active"';
							break;
						case 'quran':
							$quranActive = 'class="active"';
							break;
						case 'quran-content':
							$quranActive = 'class="active"';
							break;
						case 'qas':
							$qasActive = 'class="active"';
							break;
						case 'author':
							$aboutActive = 'class="active"';
							break;
						default:
							$homeActive = 'class="active"';
					}
				?>
				<li <?php echo $homeActive ?>><a class="menu-utama" href="?menu=home">Home</a></li>
				<li <?php echo $quranActive ?>><a class="menu-utama" href="?menu=quran">Al-Quran</a></li>
				<!--li <?php echo $qasActive ?>><a class="menu-utama" href="?menu=qas">QAS</a></li>
				<li <?php echo $aboutActive ?>><a class="menu-utama" href="?menu=author">Contact</a></li-->
	          </ul>
	        </div>
	        <!--/.nav-collapse -->
	      </div>
	    </div>


	<section id="header" name="header"></section>
	<div id="headerwrap">
	    <div class="container">
	    	<div class="row centered" style="margin-top: -15px;">
	    		<div class="col-lg-12">
					<h1>QAS Al Qur'an</b></h1>
					<h3>Terjemah Bahasa Indonesia</h3>
					<br>
	    		</div>
	    	</div>
	    </div>
	    <!--/ .container -->
	</div>
	<!--/ #headerwrap -->
	
	<div class="container">
		<?php include __DIR__ . "/contents.php"; ?>
		<br>
		<hr>
	</div> <!--/ .container -->

	<div id="c">
		<div class="container">
			<p>
				Copyleft : <?php echo $tanggal->format('Y') ?>
                <a href="https://www.facebook.com/hasansulthoni" target="blank">Hasan Sulthoni</a> <br/>
                Template by <a href="http://www.blacktie.co">BLACKTIE.CO</a>
            </p>
		</div>
	</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/bootstrap.js"></script>
	<script>
    $('#sembunyikan-score').hide();
    $('.score-detail').hide();
    $('#tampilkan-score').click(function() {
        $('#tampilkan-score').hide();
        $('#sembunyikan-score').show();
        $('.score-detail').show();
    });
    $('#sembunyikan-score').click(function() {
        $('#tampilkan-score').show();
        $('#sembunyikan-score').hide();
        $('.score-detail').hide();
    });
	$('.carousel').carousel({
	  interval: 3500
	})
	</script>
  </body>
</html>
